<div class="modal-header">
  <h4 class="modal-title pull-left">Add a new Direct API</h4>
  <button type="button" class="close" aria-label="Close" (click)="close()">
    <span class="pficon pficon-close"></span>
  </button>
</div>
<div class="modal-body">
  <mat-stepper [linear]="true" #stepper>
    <mat-step>
      <ng-template matStepLabel>Direct API type</ng-template>
      <div class="text-center">
        <h2 class="api-type-title">
          <span class="fa fa-rocket"></span> Choose your API type
        </h2>
      </div>
      <div class="row">
        <div class="col-xs-2"></div>
        <div class="col-xs-4">
          <div
            class="pfng-card card-pf card-pf-accented card-pf-aggregate-status api-card"
            (click)="changeApiType(API_TYPE.GENERIC_REST)"
            [class.api-card-selected]="
              selectedApiType === API_TYPE.GENERIC_REST
            "
          >
            <div class="card-pf-header">
              <h3>
                <span class="fa pficon-plugged generic-icon-sm"></span> REST API
              </h3>
            </div>
            <div class="card-pf-body">
              A simple RESTful API with CRUD operations on JSON resources -
              represented with <b>OpenAPI</b> spec.
            </div>
          </div>
        </div>
        <div class="col-xs-4">
          <div
            class="pfng-card card-pf card-pf-accented card-pf-aggregate-status api-card"
            (click)="changeApiType(API_TYPE.GENERIC_EVENT)"
            [class.api-card-selected]="
              selectedApiType === API_TYPE.GENERIC_EVENT
            "
          >
            <div class="card-pf-header">
              <h3>
                <span class="fa fa-bolt generic-icon-sm"></span> Event Driven
                API
              </h3>
            </div>
            <div class="card-pf-body">
              A simple asynchronous API that publishes JSON events - represented
              with <b>AsyncAPI</b> spec.
            </div>
          </div>
        </div>
        <div class="col-xs-2"></div>
      </div>
    </mat-step>
    <mat-step label="API properties">
      <form class="form-horizontal">
        <fieldset>
          <legend><span class="fa fa-rocket"></span> API properties</legend>
          <div class="control-group">
            <label class="control-label required-pf" for="name">API Name &amp; Version</label>
            <div class="controls row">
              <div class="col-xs-6">
                <input type="text" placeholder="eg. Order API" id="name" name="name" class="form-control" size="20" [(ngModel)]="api.name" (ngModelChange)="updateApiProperties()" required/>
              </div>
              <div class="input-group col-xs-2">
                <span class="input-group-addon">v.</span>
                <input type="text" placeholder="1.0" id="version" name="version" class="form-control" [(ngModel)]="api.version" (ngModelChange)="updateApiProperties()" required/>
              </div>
            </div>
            <p class="help-block">The name and version of the API to create (should be unique).</p>
          </div>
          <div class="control-group">
            <label class="control-label required-pf" for="resource">Resource</label>
            <div class="controls">
              <input type="text" placeholder="eg. order" id="resource" name="resource" class="form-control" [(ngModel)]="api.resource" (ngModelChange)="updateApiProperties()" required/>
              <p class="help-block">The resource this API will expose (will be used for CRUD or Publish API operations).</p>
            </div>
          </div>
        </fieldset>
      </form>
    </mat-step>
    <mat-step label="Reference payload">
      <form class="form-horizontal">
        <fieldset>
          <legend><span class="fa fa-rocket"></span> API reference resource</legend>
          <div class="control-group">
            <label class="control-label" [class.required-pf]="apiType === 'GENERIC_EVENT'" for="referencePayload">JSON Reference Payload</label>
            <div class="controls">
              <textarea class="form-control" rows="10" id="referencePayload" name="referencePayload" [(ngModel)]="api.referencePayload" (ngModelChange)="updateApiReference()">
              </textarea>
              <p class="help-block">A JSON payload that will be used as first and reference resource of this API</p>
            </div>
          </div>
        </fieldset>
      </form>
    </mat-step>
    <mat-step label="Review">
      <div class="wizard-pf-review-page">
        <div class="wizard-pf-review-steps">
          <ul class="list-groups">
            <li class="list-group-item">
              <a class="apf-form-collapse">Direct API type</a>
              <div class="wizard-pf-review-substeps">
                <div class="wizard-pf-review-content">
                  <form class="form">
                    <div class="wizard-pf-review-item">
                      <span class="wizard-pf-review-item-label">API type:</span>
                      <span class="wizard-pf-review-item-value">{{ selectedApiType }}</span>
                    </div>
                  </form>
                </div>
              </div>
            </li>
            <li class="list-group-item">
              <a class="apf-form-collapse">API Properties</a>
              <div class="wizard-pf-review-substeps">
                <div class="wizard-pf-review-content">
                  <form class="form">
                    <div class="wizard-pf-review-item">
                      <span class="wizard-pf-review-item-label">API name:</span>
                      <span class="wizard-pf-review-item-value">{{api.name}}</span>
                    </div>
                    <div class="wizard-pf-review-item">
                      <span class="wizard-pf-review-item-label">API version:</span>
                      <span class="wizard-pf-review-item-value">{{api.version}}</span>
                    </div>
                    <div class="wizard-pf-review-item">
                      <span class="wizard-pf-review-item-label">API resource:</span>
                      <span class="wizard-pf-review-item-value">{{api.resource}}</span>
                    </div>
                  </form>
                </div>
              </div>
            </li>
            <li class="list-group-item">
              <a class="apf-form-collapse">Refrence payload</a>
              <div class="wizard-pf-review-substeps">
                <div class="wizard-pf-review-content">
                  <form class="form">
                    <div class="wizard-pf-review-item">
                      <span class="wizard-pf-review-item-label">JSON reference payload:</span>
                      <span class="wizard-pf-review-item-value"><code>{{api.referencePayload}}</code></span>
                    </div>
                  </form>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </mat-step>
  </mat-stepper>
</div>
<div class="modal-footer wizard-pf-footer pfng-wizard-position-override">
  <button class="btn btn-default" type="button" (click)="close()">Cancel</button>
  <button class="btn btn-default" type="button"(click)="previous()" [disabled]="isPreviousDisabled()">&lt; Back</button>
  <button class="btn btn-primary" type="button" (click)="next($event)" [disabled]="isNextDisabled()">Next &gt;</button>
</div>